<template>
	<view :style="[AppSkinVar]">
		<e-loading-page :loading="loading"   >
			<template #icon>
				<loader ></loader>
			</template>
		</e-loading-page>
		<empty :text="$t('user.您当前还未添加任何地址')" :icon="$staticPath('default_img.png')" :show="emptyShow">
			<view class="button-box e-p-t-60">
				<e-button size="large" type="primary" shape="circle" :text="$t('user.去绑定')"
					@click="binding({})"></e-button>
			</view>
		</empty>
		<view class="addr-box bg-white e-m-b-20" v-for="item in addressList" :key="item.id" @tap="selectAddress(item)">
			<view>
				<view class="e-p-b-10 c-35 e-font-32 fw-600 e-flex" style="align-items: flex-start;">
					<view v-if="item.labelName" class="e-font-24 e-m-r-10 e-p-6"
						:style="{color: AppSkin.primary,background: labelBgColor}">
						{{item.labelName}}
					</view>
					<view class="e-flex-1">{{ item.nameExt }} {{ item.address }}</view>
				</view>
				<view class="e-flex c-secondary e-font-24">
					<text class="e-m-r-12">{{ item.name }}</text>
					<text>{{ item.phone }}</text>
				</view>
			</view>
			<view class="e-flex e-flex-between shadow-f3">
				<view class="e-flex">
					<radio :color="AppSkin.primary" :checked="item.isDefaul == 1" @tap.stop="setDefault(item.id)" />
					<text class="fw-600"
						:class="[item.isDefaul == 1 ? 'c-primary' : 'c-35']">{{$t('user.设为默认地址')}}</text>
				</view>
				<view class="c-secondary ">
					<text class="e-m-r-50" @tap.stop="binding({ id: item.id, type: 1 })">{{ $t('common.编辑') }}</text>
					<text @tap.stop="deleteAddr(item.id)">{{ $t('common.删除') }}</text>
				</view>
			</view>
		</view>
		<view class="fixed-button e-p-30" v-if="addressList.length">
			<e-button size="large" type="primary" shape="circle" :text="$t('user.添加新地址')"
				@click="binding({})"></e-button>
			<view style="height: 20rpx;"></view>
			<view class="ios-btm"></view>
		</view>
		<view style="height: 160rpx;"></view>
	</view>
</template>
<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	// 所有可被装修选中的页面的混入，用于动态修改标题，例如装修的按钮组组件，按钮的文本为xxx，跳转到对应页面时，会将页面的标题修改为xxx
	import layoutPageTitleMixIn from '@/common/mixin/layoutPageTitleMixIn'
	export default defineComponent({
		mixins: [layoutPageTitleMixIn],
	})
</script>
<script lang="ts" setup>
	import { ref, computed } from 'vue'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import { useInit } from '@/common/stores'
	import { storeToRefs } from 'pinia'
	import { getAddressList, postDleAddress, postSettingDefaultAddress } from '@/common/request/api'
	const { AppSkin } = storeToRefs(useInit())
	const ctx = useCurrentInstance()

	const props = defineProps<{
		type ?: string

	}>()

	const addressList = ref([])
	const loading = ref(false)
	const isSelect = props.type === '1'

	const emptyShow = computed(() => {
		return !addressList.value.length
	})
	const labelBgColor = computed(() => {
		return AppSkin?.primary?.replace('1)', '0.1)')
	})

	const getData = () => {
		loading.value = true
		getAddressList().then(res => {
			loading.value = false
			if (res.code == 200) {
				addressList.value = res.data
			}
		})
	}
	const selectAddress = (item : any) => {
		if (isSelect) {
			const eventChannel = ctx.getOpenerEventChannel();
			eventChannel.emit('selectAddress', item)
			ctx.$back()
		}
	}
	const binding = (params : any) => {
		ctx.$goTo('/pages/user/receivingAddress/binding', params)
	}
	const setDefault = (id : number | string) => {
		postSettingDefaultAddress(id).then(res => {
			getData()
		})
	}
	const deleteAddr = (id : number | string) => {
		ctx.$showModal({
			content: ctx.$t('user.是否删除地址'),
			success: res => {
				if (res.confirm) {
					postDleAddress(id).then(res => {
						if (res.code == 200) {
							getData()
						}
					})
				}
			}
		})
	}
	onShow(() => {
		getData()
	})
</script>

<style scoped lang="scss">
	.p-t-226 {
		padding-top: 226rpx;
	}

	.shadow-f3 {
		box-shadow: 0px -2rpx 0px 0px #f3f3f3;
	}

	.button-box {
		width: 278rpx;
		margin: 0 auto;
	}

	.addr-box {
		>view {
			padding: 30rpx;

			&:first-child {
				padding-bottom: 24rpx;
				box-shadow: 0px -1px 0px 0px #f3f3f3;
			}
		}
	}

	.fixed-button {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
	}
</style>